@use 'sass:math';

.wrapper {
  box-sizing: border-box;
  --color-primary: rgba(220, 219, 219, 0.78);
  --color-surface: #242425;
  --time: 24s;
  
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: var(--color-surface);
  color: var(--color-primary);
  position: absolute;
  inset: 0;
  perspective: 80vmax;
  margin: 0;
  overflow: hidden;

  &:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 111;
    pointer-events: none;
    background: rgba(0, 0, 0, .1);
    mask: linear-gradient(black 1%, transparent 15%, transparent 80%, black 90%);
    backdrop-filter: blur(3vmin) invert(0);
  }
}

.line {
  --speed: 6s;
  height: 150vmax;
  width: 0.5px;
  background: hsl(0 0% 40% / 0.05);
  rotate: 50deg;
  transform-origin: center top;
  position: fixed;
  container-type: size;
  top: 0;
}

.meteor {
	aspect-ratio: 1;
	width: 2px;
  height: 80px;
  background: linear-gradient(0deg, orange 0, transparent 100%);
	position: absolute;
	left: 50%;
	top: 0;
	translate: -50% 0%;
	animation: scale2 3s infinite linear;
  opacity: 0;
  &::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: orange;
    filter: blur(1.2px);
    bottom: -5px;
    left: 50%;
    transform: translate(-50%);
  }
}

@for $i from 1 through 10 {
  .line#{$i} {
    left: 20% + ($i - 1) * 30%;
    .meteor {
      animation-delay: $i * 1s;
    }
  }
}

@keyframes scale2 {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    transform: translateY(15vmax);
    opacity: 0.3;
  }
	100% { 
    transform: translateY(150vmax);
    opacity: 0.3;
  }
}


/** content entry */
.entry_wrapper {
  box-sizing: border-box;
}
.section_title {
  font-size: 12px;
  margin: 24px 16px 16px 16px;
  color: hsl(0 0% 50%);
  padding-left: 16px;
  transition: all 1s;
}
.section {
  display: grid;  
  grid-template-columns: 1fr 1fr;
  margin: 0 16px;
}